dx /* eslint-disable no-undef */ /* eslint-disable brace-style */
<template>
	<div v-loading="loading" class="basic-container">
		<el-row>
			<el-col :span="4">
				<div>
					{{ $t('operation.activity_list.template1') }}：{{
						rowData.name1 == '1'
							? $t('operation.activity_list.deposit_activity')
							: $t('operation.activity_list.activity')
					}}
				</div>
			</el-col>
			<el-col :span="4">
				<div>
					<el-button
						class="btn"
						type="primary"
						:disabled="loading"
						size="mini"
						@click="handleSave"
					>
						{{ $t('operation.activity_list.all_save') }}
					</el-button>
				</div>
			</el-col>
		</el-row>
		<div class="basic-params">
			<el-tabs v-model="activeName" @tab-click="handleClick">
				<el-tab-pane
					class="tab-item"
					:label="$t('operation.activity_list.config')"
					name="first"
				>
					<template>
						<el-form
							ref="ruleForm"
							:model="queryData"
							:rules="rules"
							:inline="true"
						>
							<div>
								<el-form-item
									:label="
										$t('operation.activity_list.subject') +
											':'
									"
									prop="name"
								>
									<el-input
										v-model="queryData.name"
										size="mini"
										:placeholder="
											$t('operation.activity_list.less20')
										"
										clearable
										style="width: 180px"
										:disabled="!editVisible"
										maxlength="20"
									></el-input>
								</el-form-item>
								<el-form-item
									v-if="isCn"
									:label="
										$t(
											'operation.activity_list.main_title_chinese'
										) + ':'
									"
									prop="cnTitle"
								>
									<el-input
										v-model="queryData.cnTitle"
										size="mini"
										:placeholder="
											$t(
												'operation.activity_list.less100'
											)
										"
										clearable
										style="width: 180px"
										:disabled="!editVisible"
										maxlength="100"
									></el-input>
								</el-form-item>
								<el-form-item
									v-if="isEn"
									:label="
										$t(
											'operation.activity_list.main_title_english'
										) + ':'
									"
									prop="enTitle"
								>
									<el-input
										v-model="queryData.enTitle"
										size="mini"
										:placeholder="
											$t(
												'operation.activity_list.less100'
											)
										"
										clearable
										style="width: 180px"
										:disabled="!editVisible"
										maxlength="100"
									></el-input>
								</el-form-item>
								<el-form-item
									v-if="isTh"
									:label="
										$t(
											'operation.activity_list.main_title_thai'
										) + ':'
									"
									prop="thTitle"
								>
									<el-input
										v-model="queryData.thTitle"
										size="mini"
										:placeholder="
											$t(
												'operation.activity_list.less100'
											)
										"
										clearable
										style="width: 180px"
										:disabled="!editVisible"
										maxlength="100"
									></el-input>
								</el-form-item>
								<el-form-item
									v-if="isVi"
									:label="
										$t(
											'operation.activity_list.main_title_vietnamese'
										) + ':'
									"
									prop="vieTitle"
								>
									<el-input
										v-model="queryData.vieTitle"
										size="mini"
										:placeholder="
											$t(
												'operation.activity_list.less100'
											)
										"
										clearable
										style="width: 180px"
										:disabled="!editVisible"
										maxlength="100"
									></el-input>
								</el-form-item>
								<el-form-item
									:label="$t('operation.activity_page') + ':'"
									prop="tagId"
								>
									<el-select
										v-model="queryData.tagId"
										size="mini"
										:placeholder="
											$t(
												'operation.activity_list.select_tag'
											)
										"
										clearable
										:disabled="!editVisible"
										collapse-tags
										style="width: 180px"
									>
										<el-option
											v-for="item in activitySelect"
											:key="item.id"
											:label="
												item[
													getKey('activityName', {
														map: {
															zh_CN: 'cn',
															en_US: 'en',
															vi_VN: 'vn',
															th_TH: 'th'
														},
														index: 1,
														zh: true
													})
												]
											"
											:value="item.id"
										></el-option>
									</el-select>
								</el-form-item>
							</div>
							<div>
								<el-form-item
									:label="
										$t(
											'operation.activity_list.route_address'
										) + ':'
									"
									prop="pageRouteAddr"
								>
									<el-input
										v-model="queryData.pageRouteAddr"
										size="mini"
										:placeholder="$t('common.please_enter')"
										clearable
										style="width: 400px"
										:disabled="!editVisible"
									></el-input>
								</el-form-item>
							</div>
							<div>
								<el-form-item
									:label="
										$t(
											'operation.activity_list.show_device'
										) + ':'
									"
									prop="deviceType"
								>
									<div class="check-box-style">
										<el-checkbox
											v-model="checkAll"
											:indeterminate="isIndeterminate"
											:disabled="!editVisible"
											@change="handleCheckAllChange"
										>
											{{
												$t(
													'operation.activity_list.all_select'
												)
											}}
										</el-checkbox>
										<div style="margin: 0 15px"></div>
										<el-checkbox-group
											v-model="queryData.deviceType"
											:disabled="!editVisible"
											@change="handleCheckedCitiesChange"
										>
											<el-checkbox
												v-for="city in cities"
												:key="city.code"
												:label="city.description"
											>
												{{ city.description }}
											</el-checkbox>
										</el-checkbox-group>
									</div>
								</el-form-item>
							</div>
							<div>
								<el-form-item
									:label="
										$t('operation.activity_list.object') +
											':'
									"
									prop="inTypeUser"
								>
									<el-select
										v-model="queryData.inTypeUser"
										size="mini"
										:placeholder="
											$t(
												'operation.activity_list.select_object'
											)
										"
										clearable
										:disabled="!editVisible"
										collapse-tags
										style="width: 180px"
									>
										<el-option
											v-for="item in activeObj"
											:key="item.id"
											:label="item.label"
											:value="item.id"
										></el-option>
									</el-select>
								</el-form-item>
							</div>
							<!-- 导入名单 -->
							<div v-if="queryData.inTypeUser !== 1">
								<el-form-item
									:label="
										$t(
											'operation.activity_list.import_list'
										) + ':'
									"
									prop="excelList"
								>
									<div class="dao-ru">
										<div
											class="down"
											@click="downloadExcel"
										>
											<svg-icon
												icon-class="down"
												class="up-icon"
											/>
											<span>
												{{
													$t(
														'operation.activity_list.download_template'
													)
												}}
											</span>
										</div>
										<div style="margin: 0 5px"></div>
										<div class="down" @click="Upload">
											<svg-icon
												icon-class="up"
												class="down-icon"
											/>
											<span>
												{{
													$t(
														'operation.activity_list.batch_import'
													)
												}}
											</span>
										</div>
									</div>
								</el-form-item>
							</div>
							<div>
								<el-form-item
									:label="
										$t('operation.activity_list.period') +
											':'
									"
									prop="cycle"
								>
									<template>
										<el-radio
											v-model="queryData.cycle"
											:disabled="!editVisible"
											:label="1"
										>
											{{
												$t(
													'operation.activity_list.detail_time'
												)
											}}
										</el-radio>
										<el-radio
											v-model="queryData.cycle"
											:disabled="!editVisible"
											:label="2"
										>
											{{ $t('operation.permanent') }}
										</el-radio>
									</template>
								</el-form-item>
								<el-form-item>
									<div>
										<span>
											{{
												$t(
													'operation.activity_list.default'
												)
											}}：
										</span>
										{{
											$t(
												'operation.activity_list.explain'
											)
										}}
									</div>
								</el-form-item>
							</div>
							<div>
								<el-form-item
									v-if="queryData.cycle === 2"
									:label="
										$t(
											'operation.activity_list.show_time'
										) + ':'
									"
									size="mini"
									prop="showTime1"
								>
									<el-date-picker
										v-model="queryData.showTime1"
										:disabled="!editVisible"
										type="datetime"
										:clearable="true"
										:picker-options="pickerOption"
										style="width: 360px"
										:placeholder="
											$t(
												'operation.activity_list.start_time'
											)
										"
										value-format="timestamp"
										@focus="queryData.showTime1 = ''"
										@blur="check(queryData.showTime1)"
									></el-date-picker>
								</el-form-item>
								<el-form-item
									v-if="queryData.cycle === 2"
									:label="
										$t('operation.activity_list.time') + ':'
									"
									size="mini"
									prop="activeTime1"
								>
									<el-date-picker
										v-model="queryData.activeTime1"
										:disabled="!editVisible"
										type="datetime"
										:clearable="true"
										:picker-options="pickerOption"
										style="width: 360px"
										:placeholder="
											$t(
												'operation.activity_list.start_time'
											)
										"
										value-format="timestamp"
										@focus="queryData.activeTime1 = ''"
										@blur="check(queryData.activeTime1)"
									></el-date-picker>
								</el-form-item>
								<el-form-item
									v-if="queryData.cycle === 1"
									:label="
										$t(
											'operation.activity_list.show_time'
										) + ':'
									"
									prop="showTime"
								>
									<el-date-picker
										v-model="queryData.showTime"
										size="mini"
										:disabled="!editVisible"
										:picker-options="pickerOptions"
										format="yyyy-MM-dd HH:mm:ss"
										type="datetimerange"
										range-separator="-"
										:start-placeholder="
											$t('common.start_date')
										"
										:end-placeholder="$t('common.end_date')"
										align="right"
										clearable
										value-format="timestamp"
										style="width: 360px"
										:default-time="defaultTime"
										@blur="check(queryData.showTime)"
									></el-date-picker>
								</el-form-item>
								<el-form-item
									v-if="queryData.cycle === 1"
									:label="
										$t('operation.activity_list.time') + ':'
									"
									prop="activeTime"
								>
									<el-date-picker
										v-model="queryData.activeTime"
										size="mini"
										:picker-options="pickerOptions1"
										:disabled="!editVisible"
										format="yyyy-MM-dd HH:mm:ss"
										type="datetimerange"
										range-separator="-"
										:start-placeholder="
											$t('common.start_date')
										"
										:end-placeholder="$t('common.end_date')"
										align="right"
										clearable
										value-format="timestamp"
										style="width: 360px"
										:default-time="defaultTime"
										@blur="check(queryData.activeTime)"
									></el-date-picker>
								</el-form-item>
							</div>
						</el-form>
					</template>
				</el-tab-pane>
				<el-tab-pane
					v-if="rowData.name1 == '1'"
					class="tab-item"
					:label="$t('operation.activity_list.rule_config')"
					name="second"
				>
					<template>
						<el-form
							ref="ruleForm1"
							:model="queryData1"
							:rules="rules"
							:inline="true"
						>
							<div>
								<el-form-item
									:label="
										$t('operation.activity_list.venue') +
											':'
									"
									prop="venue"
								>
									<div class="check-box-style">
										<el-checkbox
											v-model="checkAllCg"
											:indeterminate="isIndeterminateCg"
											:disabled="!editVisible"
											@change="handleCheckAllChangeCg"
										>
											{{
												$t(
													'operation.activity_list.all_select'
												)
											}}
										</el-checkbox>
										<div style="margin: 0 15px"></div>
										<el-checkbox-group
											v-model="queryData1.venue"
											:disabled="!editVisible"
											@change="
												handleCheckedCitiesChangeCg
											"
										>
											<el-checkbox
												v-for="city in citiesCg"
												:key="city.venueCode"
												:label="city.venueCode"
											>
												{{ city.venueName }}
											</el-checkbox>
										</el-checkbox-group>
									</div>
								</el-form-item>
							</div>
							<div>
								<el-form-item
									:label="
										$t('operation.activity_list.mode') + ':'
									"
									prop="applyType"
								>
									<el-select
										v-model="queryData1.applyType"
										size="mini"
										:placeholder="$t('common.please_enter')"
										:disabled="!editVisible"
										style="width: 180px"
									>
										<el-option
											v-for="item in ApplyObj"
											:key="item.id"
											:label="item.label"
											:value="item.id"
										></el-option>
									</el-select>
								</el-form-item>
							</div>
							<div>
								<el-form-item
									style="margin-left: 25px"
									:label="
										$t(
											'operation.activity_list.level_need'
										) + ':'
									"
									prop="vipSerialNum"
								>
									<el-select
										v-model="queryData1.vipSerialNum"
										size="mini"
										:placeholder="
											$t('common.please_choose')
										"
										:disabled="!editVisible"
										style="width: 180px"
									>
										<el-option
											v-for="item in vipRiskList"
											:key="item.id"
											:label="`VIP${item.vipSerialNum}`"
											:value="item.id"
										></el-option>
									</el-select>
								</el-form-item>
							</div>

							<div>
								<el-form-item
									:label="
										$t(
											'operation.activity_list.send_method'
										) + ':'
									"
									prop="giveType"
								>
									<template>
										<el-radio
											v-model="queryData1.giveType"
											:disabled="!editVisible"
											:label="1"
										>
											{{
												$t(
													'operation.activity_list.rate_money'
												)
											}}
										</el-radio>
										<el-radio
											v-model="queryData1.giveType"
											:disabled="!editVisible"
											:label="2"
										>
											{{
												$t(
													'operation.activity_list.fix_money'
												)
											}}
										</el-radio>
									</template>
								</el-form-item>
							</div>
						</el-form>
					</template>
					<template>
						<div class="tabs-card">
							<AppropriationTask
								ref="appropriation"
								:editVisible="editVisible"
								:queryData1="queryData1"
								:merchantInfoOther="merchantInfoOther"
								@appropriation="appropriation"
							></AppropriationTask>
						</div>
					</template>
				</el-tab-pane>
				<el-tab-pane
					class="tab-item"
					:label="$t('operation.activity_list.front_config')"
					name="third"
				>
					<!-- FrontEndConfiguration -->
					<FrontEndConfiguration
						ref="FrontFiguration"
						:editVisible="editVisible"
						:deviceType="queryData.deviceType"
						:merchantInfoOther="merchantInfoOther"
						@handleFrontVal="handleFrontVal"
					></FrontEndConfiguration>
				</el-tab-pane>
				<el-tab-pane
					class="tab-item"
					:label="$t('operation.activity_list.content_config')"
					name="fourth"
				>
					<div style="display: flex; margin-top: 15px">
						<span
							style="
								color: red;
								font-size: 20px;
								line-height: 28px;
								margin-right: 5px;
							"
						>
							*
						</span>
						<span>
							{{ $t('operation.activity_list.device_detail') }}
						</span>
					</div>
					<div v-if="isCn">
						<span>{{ $t('operation.activity_list.chinese') }}</span>
						<yk-editor
							key="editorOne11"
							ref="editorOne11"
							v-model="queryData2.cnActivityDoc"
							domName="editorOne11"
							:editVisible="editVisible"
							@change="getEditorOne"
						></yk-editor>
						<div
							v-if="
								!queryData2.cnActivityDoc &&
									editVisible &&
									isErr4
							"
							style="color: red; font-size: 12px; margin-top: 10px"
						>
							<span>{{ $t('common.please_enter') }}</span>
						</div>
					</div>
					<div v-if="isEn">
						<span>{{ $t('operation.activity_list.english') }}</span>
						<yk-editor
							key="editorTwo11"
							ref="editorTwo11"
							v-model="queryData2.enActivityDoc"
							domName="editorTwo11"
							:editVisible="editVisible"
							@change="getEditorOne"
						></yk-editor>
						<div
							v-if="
								!queryData2.enActivityDoc &&
									editVisible &&
									isErr4
							"
							style="color: red; font-size: 12px; margin-top: 10px"
						>
							<span>{{ $t('common.please_enter') }}</span>
						</div>
					</div>
					<div v-if="isTh">
						<span>{{ $t('operation.activity_list.thai') }}</span>
						<yk-editor
							key="editorThree11"
							ref="editorThree11"
							v-model="queryData2.thActivityDoc"
							domName="editorThree11"
							:editVisible="editVisible"
							@change="getEditorOne"
						></yk-editor>
						<div
							v-if="
								!queryData2.thActivityDoc &&
									editVisible &&
									isErr4
							"
							style="color: red; font-size: 12px; margin-top: 10px"
						>
							<span>{{ $t('common.please_enter') }}</span>
						</div>
					</div>
					<div v-if="isVi">
						<span>
							{{ $t('operation.activity_list.vietnamese') }}
						</span>
						<yk-editor
							key="editorFour11"
							ref="editorFour11"
							v-model="queryData2.viActivityDoc"
							domName="editorFour11"
							:editVisible="editVisible"
							@change="getEditorOne"
						></yk-editor>
						<div
							v-if="
								!queryData2.viActivityDoc &&
									editVisible &&
									isErr4
							"
							style="color: red; font-size: 12px; margin-top: 10px"
						>
							<span>{{ $t('common.please_enter') }}</span>
						</div>
					</div>
				</el-tab-pane>
			</el-tabs>
			<!-- <div class="close" @click="close">x</div> -->
			<!-- 圆点 -->
			<div class="box-container">
				<div ref="first" class="box b1"></div>
				<div
					v-if="rowData.name1 == '1'"
					ref="second"
					class="box b2"
				></div>
				<div
					ref="third"
					class="box"
					:class="[rowData.name1 == '1' ? 'b3' : 'bb3']"
				></div>
				<div
					ref="fourth"
					class="box"
					:class="[rowData.name1 == '1' ? 'b4' : 'bb4']"
				></div>
			</div>
			<!-- <div>
				<el-button class="btn small btn-left" size="mini" @click="resetSave">
					取消
				</el-button>
				<el-button
					class="btn small"
					type="primary"
					size="mini"
					@click="handleSave"
				>
					保存
				</el-button>
			</div> -->
			<!-- <div v-else>
				<el-button @click="editVisible = true" type="primary" class="small ">
					我要编辑
				</el-button>
			</div> -->
		</div>
		<!--  -->
		<!-- 批量导入二级框 -->
		<UploadFiles
			:visibleUpload.sync="visibleUpload"
			:file-size="500"
			:activeStatus="true"
			:fileAPI="fileAPI"
			:merchantId="merchantInfoOther.id"
			@fileUrl="getFileUrl"
		></UploadFiles>
	</div>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
import { promotionList } from '@/api/operation'
import { shortcuts1 } from '@/utils/consts'
import { pickerOption } from './pickerOption'
import AppropriationTask from './comps/AppropriationTask'
import FrontEndConfiguration from './comps/FrontEndConfiguration'
import UploadFiles from '../UploadFiles/index.vue'
import ykEditor from '../ykeditor/index.vue'

// const start = dayjs()
// 	.startOf('day')
// 	.valueOf()
// const end = dayjs()
// 	.endOf('day')
// 	.valueOf()
export default {
	name: 'BasicConfiguration',
	components: {
		AppropriationTask,
		FrontEndConfiguration,
		ykEditor,
		UploadFiles
	},
	mixins: [list],
	props: {
		showEdited: {
			type: Boolean,
			default: () => false
		},
		rowData1: {
			type: Object,
			default: () => {}
		}
	},
	data() {
		return {
			rowData: {},
			loading: true,
			activitySelect: [],
			noShowBtn: true,
			// 默认我要编辑
			editVisible: true,
			//
			checkAll: false,

			cities: [],
			isIndeterminate: false,

			citiesCg: [],
			isIndeterminateCg: false,
			//
			activeObj: [
				{ label: this.$t('operation.all_member'), id: 1 },
				{ label: this.$t('operation.activity_list.in_member'), id: 2 },
				{
					label: this.$t('operation.activity_list.agent_member'),
					id: 3
				}
			],
			activeYean: [
				{ label: this.$t('operation.activity_list.read_tag'), id: 1 }
			],
			ApplyObj: [
				{ label: this.$t('operation.activity_list.venue1'), id: 1 },
				{ label: this.$t('operation.activity_list.account1'), id: 2 },
				{ label: this.$t('operation.activity_list.activity1'), id: 3 }
			],
			sheBeiObj: [
				{ label: this.$t('common.yes'), id: 1 },
				{ label: this.$t('common.no'), id: 0 }
			],
			vipRiskList: [],
			dividendObj: [
				{ label: this.$t('operation.activity_list.bonus'), id: 1 },
				{ label: this.$t('operation.activity_list.people'), id: 2 }
			],
			activeName: 'first',
			activeId: 2,
			visibleUpload: false,
			// 基础配置 校验判断点
			isErr1: false,
			// 基础配置，编辑正确
			firstOk: false,
			// 基础配置，已经编辑但是不正确
			firstNoOk: false,

			// 规则配置 校验判断点
			isErr2: false,
			// 规则子节点的
			isValidate1: false,
			isValidate2: false,
			isValidate3: false,
			isValidate4: false,
			isValidate5: false,
			isValidate6: false,
			// 规则配置，编辑正确
			secondOk: false,
			// 规则配置，已经编辑但是不正确
			secondNoOk: false,

			// 前端配置,默认0 后面更改会是true/false 校验判断点
			isErr3: 0,
			// 内容配置,默认0 后面更改会是true/false 校验判断点
			isErr4: 0,
			queryData: {
				name: '',
				title: '',
				cnTitle: '',
				enTitle: '',
				thTitle: '',
				vieTitle: '',
				tagId: undefined,
				pageRouteAddr: '',
				inTypeUser: 1,
				cycle: 1,
				excelList: [],
				deviceType: [],
				//
				showTime: [],
				activeTime: [],
				activeTime1: '',
				showTime1: ''
			},
			checkAllCg: false,
			queryData1: {
				// 场馆
				venue: [],
				ip: 1,
				vipSerialNum: undefined,
				giveType: 1
				// dividend: 1,
			},
			queryData2: {
				cnActivityDoc: '',
				thActivityDoc: '',
				enActivityDoc: '',
				viActivityDoc: ''
			},
			pickerOption: pickerOption,
			merchantId: null
		}
	},
	computed: {
		isCn() {
			return (
				this.languages.includes('cn') ||
				this.languages.includes('zh') ||
				this.languages.includes('ZH') ||
				this.languages.includes('zh_CN') ||
				this.languages.includes('中文')
			)
		},
		isEn() {
			return (
				this.languages.includes('EN') ||
				this.languages.includes('en') ||
				this.languages.includes('en_US') ||
				this.languages.includes('英文')
			)
		},
		isTh() {
			return (
				this.languages.includes('TH') ||
				this.languages.includes('th') ||
				this.languages.includes('th_TH') ||
				this.languages.includes('泰文')
			)
		},
		isVi() {
			return (
				this.languages.includes('VI') ||
				this.languages.includes('vi') ||
				this.languages.includes('vi_VN') ||
				this.languages.includes('越南文')
			)
		},
		merchantInfoOther() {
			const id = this.merchantId
			const find = this.merchantList.find((item) => item.id === id)
			return find || {}
		},
		languages() {
			const languages = this.merchantInfoOther.languages || ''
			return languages.split(',')
		},
		activityName() {
			const map = {
				THB: 'activityNameTh',
				CNY: 'activityNameCn',
				VND: 'activityNameVn',
				vi_VN: 'activityNameVn',
				en_US: 'activityNameEn',
				zh_CN: 'activityNameCn',
				th_TH: 'activityNameTh'
			}
			const data = this.merchantInfoOther
			const language = data && data.languages
			if (!language) return 'activityNameCn'
			const array = language.split(',').map((item) => map[item])
			const currency = data.currency
			const res = array.includes(map[currency]) ? map[currency] : array[0]
			return res
		},
		pickerOptions() {
			const _this = this
			return {
				disabledDate(time) {
					const value = time.getTime()
					return value < Date.now() - 3600 * 1000 * 24
				},
				onPick({ maxDate, minDate }) {
					if (!maxDate) {
						_this.minDate = minDate
					}
				},
				shortcuts: shortcuts1
			}
		},
		pickerOptions1() {
			const _this = this
			return {
				onPick({ maxDate, minDate }) {
					if (!maxDate) {
						_this.minDate = minDate
					}
				},
				shortcuts: shortcuts1
			}
		},
		activityTypeStatus() {
			return this.globalDics.activityType || []
		},
		loginDeviceType() {
			return this.globalDics.loginDeviceType || []
		},
		fileAPI() {
			return this.rowData.name1 == '1'
				? 'firstDepositCheck'
				: 'displayPageCheck'
		},
		rules() {
			return {
				activeSwitch: [
					{
						required: true,
						message: this.$t('common.please_choose'),
						trigger: ['blur', 'change']
					}
				],
				deviceType: [
					{
						required: true,
						message: this.$t('common.please_choose'),
						trigger: ['blur', 'change']
					}
				],
				name: [
					{
						required: true,
						message: this.$t('common.please_enter'),
						trigger: ['blur', 'change']
					}
				],
				pageRouteAddr: [
					{
						required: true,
						message: this.$t('common.please_enter'),
						trigger: ['blur', 'change']
					}
				],
				title: [
					{
						required: true,
						message: this.$t('common.please_enter'),
						trigger: ['blur', 'change']
					}
				],
				cnTitle: [
					{
						message: this.$t('common.please_enter'),
						required: true,
						trigger: ['blur', 'change']
					}
				],
				enTitle: [
					{
						message: this.$t('common.please_enter'),
						required: true,
						trigger: ['blur', 'change']
					}
				],
				thTitle: [
					{
						message: this.$t('common.please_enter'),
						required: true,
						trigger: ['blur', 'change']
					}
				],
				vieTitle: [
					{
						message: this.$t('common.please_enter'),
						required: true,
						trigger: ['blur', 'change']
					}
				],
				inTypeUser: [
					{
						required: true,
						message: this.$t('common.please_choose'),
						trigger: ['blur', 'change']
					}
				],
				tagId: [
					{
						required: true,
						message: this.$t('common.please_choose'),
						trigger: ['blur', 'change']
					}
				],
				cycle: [
					{
						required: true,
						message: this.$t('common.please_enter'),
						trigger: ['blur', 'change']
					}
				],
				showTime: [
					{
						required: true,
						message: this.$t('common.please_enter'),
						trigger: ['blur', 'change']
					}
				],
				excelList: [
					{
						required: true,
						message: this.$t('operation.activity_list.import_file'),
						trigger: 'blur'
					}
				],
				showTime1: [
					{
						required: true,
						message: this.$t('common.please_enter'),
						trigger: ['blur', 'change']
					}
				],
				activeTime: [
					{
						required: true,
						message: this.$t('common.please_enter'),
						trigger: ['blur', 'change']
					}
				],
				activeTime1: [
					{
						required: true,
						message: this.$t('common.please_enter'),
						trigger: ['blur', 'change']
					}
				],

				applyType: [
					{
						required: true,
						message: this.$t('common.please_choose'),
						trigger: ['blur', 'change']
					}
				],
				giveType: [
					{
						required: true,
						message: this.$t('common.please_choose'),
						trigger: ['blur', 'change']
					}
				],

				vipSerialNum: [
					{
						required: true,
						message: this.$t('common.please_choose'),
						trigger: ['blur', 'change']
					}
				],
				venue: [
					{
						required: true,
						message: this.$t('common.please_choose'),
						trigger: ['blur', 'change']
					}
				]
			}
		}
	},
	watch: {
		'queryData.cycle': function(val) {
			if (val) {
				if (val === 1) {
					this.queryData.showTime1 = ''
					this.queryData.activeTime1 = ''
				} else if (val === 2) {
					this.queryData.showTime = []
					this.queryData.activeTime = []
				}
			}
			this.$refs.ruleForm.validateField('cycle')
		},
		rowData1: {
			handler(val) {
				if (val && Object.keys(val).length <= 3) return
				// console.log(val, 'val')
				this.rowData = { ...val }
				if (
					this.$refs.appropriation?.$refs.tableForm &&
					this.rowData.activityConfigScRuleList?.length
				) {
					this.$nextTick(() => {
						setTimeout(() => {
							this.$refs.appropriation.$refs.tableForm.model.scRuleList =
								this.rowData.activityConfigScRuleList || []
						})
					})
				}
				// console.log(this.rowData, '---')
			},
			immediate: true,
			deep: true
		},
		editVisible: {
			handler(val) {
				this.$nextTick(() => {
					this.firstValidate()
				})
			},
			deep: true,
			immediate: true
		},
		// 基础配置的圆点检测
		queryData: {
			handler(el) {
				Object.keys(el).forEach((item) => {
					this.firstValidate()
				})
			},
			deep: true,
			immediate: true
		},
		// 规则配置的圆点检测
		queryData1: {
			handler(el) {
				Object.keys(el).forEach((item) => {
					this.$nextTick(() => {
						this.secondValidate()
						this.validate1()
					})
				})
			},
			immediate: true,
			deep: true
		},
		// 内容配置
		queryData2: {
			handler(el) {
				const array = Object.keys(el)
					.map((item) => {
						return el[item]
					})
					.filter((item) => !!item)
				if (this.activeName !== 'fourth') return
				if (array.length < this.languages.length) {
					this.$nextTick(() => {
						this.isErr4 = true
						this.$refs[this.activeName]?.setAttribute(
							'style',
							'background:red'
						)
					})
				} else {
					this.$nextTick(() => {
						this.isErr4 = false
						this.$refs[this.activeName]?.setAttribute(
							'style',
							'background:green'
						)
					})
				}
			},
			immediate: true,
			deep: true
		},
		// 圆点
		activeName: {
			handler(val) {
				const tabItemArr = ['first', 'second', 'third', 'fourth']
				this.$nextTick(() => {
					if (val === this.activeName) {
						this.$refs[this.activeName]?.setAttribute(
							'style',
							'background:rgba(0, 0, 0, 0.247)'
						)
						setTimeout(() => {
							this.beForeEdit()
						}, 1000)
					}
					tabItemArr.forEach((item) => {
						if (item !== val) {
							this.$refs[item]?.setAttribute(
								'style',
								'background:rgba(0, 0, 0, 0.247)'
							)
							if (this.firstOk && this.activeName !== 'first') {
								this.$refs['first']?.setAttribute(
									'style',
									'background:green'
								)
							}
							if (this.firstNoOk && this.activeName !== 'first') {
								this.$refs['first']?.setAttribute(
									'style',
									'background:red'
								)
							}
							if (this.secondOk && this.activeName !== 'second') {
								this.$refs['second']?.setAttribute(
									'style',
									'background:green'
								)
							}
							if (
								this.secondNoOk &&
								this.activeName !== 'second'
							) {
								this.$refs['second']?.setAttribute(
									'style',
									'background:red'
								)
							}
							if (this.isErr3 && this.activeName !== 'third') {
								this.$refs['third']?.setAttribute(
									'style',
									'background:green'
								)
							}
							if (
								!this.isErr3 &&
								this.isErr3 !== 0 &&
								this.activeName !== 'third'
							) {
								this.$refs['third']?.setAttribute(
									'style',
									'background:red'
								)
							}
							if (
								this.isErr4 &&
								this.isErr4 !== 0 &&
								this.activeName !== 'fourth'
							) {
								this.$refs['fourth']?.setAttribute(
									'style',
									'background:red'
								)
							}
							if (
								!this.isErr4 &&
								this.isErr4 !== 0 &&
								this.activeName !== 'fourth'
							) {
								this.$refs['fourth']?.setAttribute(
									'style',
									'background:green'
								)
							}
						}
					})
				})
			},
			immediate: true,
			deep: true
		}
	},
	async created() {
		const { query } = this.$route
		let res = {}
		try {
			this.loading = true
			const formData = new FormData()
			formData.append('id', query.id)
			res = await this.$api.activityQueryById(formData)
			this.merchantId = res.data.merchantId
		} catch (error) {
			console.error(error)
		} finally {
			this.loading = false
		}
		this.activitySel()
		this.getVipRisk()

		this.$route.meta.title = this.$t(
			'operation.activity_list.activity_edit'
		)
		if (query && Object.keys(query).length > 0) {
			this.$nextTick(() => {
				this.rowData = {
					...res.data,
					...query
				}
				// console.log(this.rowData, 'this.rowData')
				this.$refs.FrontFiguration.queryData.name1 = this.rowData.name1
				if (Object.keys(this.rowData).length <= 3) return

				this.$nextTick(async () => {
					this.checkObj()
					this.one()
					this.three()
					this.four()
					// console.log(this.rowData, 'this.rowData')
					if (this.rowData.name1 == '1') {
						await this.getCityOptionsCg()
						this.two()
					}
				})
			})
		}
		if (Object.keys(this.rowData).length <= 3) return
	},
	mounted() {
		this.cities = this.loginDeviceType
		// console.log(
		// 	Object.keys(this.rowData).length,
		// 	'Object.keys(this.rowData).length',
		// 	this.$route.query
		// )
	},
	methods: {
		async getCityOptionsCg() {
			const res = await this.$api.memberVenue({
				merchantId: this.merchantInfoOther.id
			})
			this.citiesCg = res.data || []
		},
		async checkObj() {
			if (this.rowData.name1 == '1') {
				await setTimeout(() => {
					this.checkEr()
				}, 1000)
			}
			await setTimeout(() => {
				this.checkSan()
			}, 1500)
			await setTimeout(() => {
				this.checkSi()
			}, 2000)
		},
		checkSi() {
			if (
				Object.values(this.queryData2).filter((item) => item).length <
				this.languages.length
			) {
				this.isErr4 = true
				this.$refs['fourth']?.setAttribute('style', 'background:red')
			} else {
				this.isErr4 = false
				this.$refs['fourth']?.setAttribute('style', 'background:green')
			}
			// })
		},
		checkSan() {
			// this.activeName = 'third'
			this.handleFrontValeDid(true)
		},
		checkEr() {
			this.$nextTick(() => {
				this.validate1()
				this.secondValidated('second')
				this.appropriation()
			})
		},
		secondValidated() {
			this.isErr2 = this.isValidate1 && this.isValidate5
			if (!this.isErr2) {
				this.secondOk = false
				this.secondNoOk = true
				this.$nextTick(() => {
					this.$refs['second']?.setAttribute(
						'style',
						'background:red'
					)
				})
			} else if (this.isErr2) {
				this.secondOk = true
				this.secondNoOk = false
				this.$nextTick(() => {
					this.$refs['second']?.setAttribute(
						'style',
						'background:green'
					)
				})
			}
		},
		close() {
			const { query } = this.$route
			if (query && Object.keys(query).length > 0) {
				this.$router.push({
					path: '/operation/activityManage/activityList'
				})
			}
			// this.$router.go(-1)
			this.$emit('close', false)
		},
		four() {
			// 内容配置
			const array = Object.keys(this.queryData2)
			const object = array.reduce((prev, next) => {
				this.rowData[next] && (prev[next] = this.rowData[next])
				return prev
			}, {})
			Object.assign(this.queryData2, object)
		},
		three() {
			// queryData 前端配置
			const array = Object.keys(this.$refs.FrontFiguration.queryData)
			const object = array.reduce((prev, next) => {
				prev[next] = this.rowData[next]
				return prev
			}, {})
			this.$refs.FrontFiguration.queryData = {
				...object,
				entranceEnable: +this.rowData.entranceEnable
			}
		},
		two() {
			// queryData 规则配置
			const venue = this.rowData.venue
				? this.rowData.venue.split(',')
				: []
			this.queryData1 = {
				// ...this.rowData
				venue: venue,
				// ip: this.rowData.ip,
				vipSerialNum: this.rowData.vipId,
				applyType: this.rowData.applyType,
				giveType: this.rowData.giveType,
				name1: this.rowData.name1
			}
			// console.log(
			// 	this.rowData.venue,
			// 	venue,
			// 	venue.length,
			// 	this.citiesCg.length,
			// 	'-venue--'
			// )
			this.checkAllCg = venue?.length === this.citiesCg.length
			this.isIndeterminateCg =
				venue?.length > 0 && venue?.length < this.citiesCg.length
			if (
				this.$refs.appropriation.$refs.tableForm &&
				this.rowData.activityConfigScRuleList?.length
			) {
				this.$nextTick(() => {
					setTimeout(() => {
						this.$refs.appropriation.$refs.tableForm.model.scRuleList =
							this.rowData.activityConfigScRuleList || []
					})
				})
			}

			// console.log(this.queryData1, 'this.queryData1')
		},
		one() {
			// queryData 基础配置
			const deviceType =
				this.cities &&
				this.cities?.length > 1 &&
				this.cities.map((val) => {
					// console.log(val.code, this.rowData.deviceType.split(','), '=====')
					if (this.rowData.deviceType.split(',').includes(val.code)) {
						return val.description
					}
				})
			this.queryData = {
				inTypeUser: +this.rowData.inTypeUser,
				excelList: this.rowData.activityConfigMemberList,
				activeTime1: +new Date(this.rowData.activityStartTime),
				showTime1: +new Date(this.rowData.showStartTime),
				showTime: [
					this.rowData.showStartTime &&
						dayjs(this.rowData.showStartTime).valueOf(),
					this.rowData.showEndTime &&
						dayjs(this.rowData.showEndTime).valueOf()
				],
				activeTime: [
					this.rowData.activityStartTime &&
						dayjs(this.rowData.activityStartTime).valueOf(),
					this.rowData.activityEndTime &&
						dayjs(this.rowData.activityEndTime).valueOf()
				],
				name: this.rowData.name,
				title: this.rowData.title,
				tagId: this.rowData.tagId,
				cnTitle: this.rowData.cnTitle,
				enTitle: this.rowData.enTitle,
				thTitle: this.rowData.thTitle,
				vieTitle: this.rowData.vieTitle,
				pageRouteAddr: this.rowData.pageRouteAddr,
				cycle: +this.rowData.cycle,
				deviceType: deviceType
				// ...this.rowData
			}
			// delete this.rowData.inTypeUser
			const deviceType1 = []
			this.queryData.deviceType &&
				this.queryData.deviceType.map((val) => {
					if (val && val !== undefined) {
						deviceType1.push(val)
					}
				})
			// console.log(deviceType1.split(), this.queryData.deviceType, '====')
			this.isIndeterminate = deviceType1.length !== this.cities.length
			this.checkAll = deviceType1.length === this.cities.length
		},
		getVipRisk() {
			this.$api
				.memberVipGradeSelectAPI({
					merchantId: this.merchantInfoOther.id
				})
				.then((res) => {
					const { code, data } = res
					if (code === 200) {
						this.vipRiskList = (data || []).sort((prev, next) => {
							return prev.vipSerialNum - next.vipSerialNum
						})
					}
				})
		},
		activitySel() {
			const params = {
				merchantClientId: this.merchantInfoOther.id,
				activityStatus: 1,
				pageNum: 1,
				pageSize: 10
			}
			params.merchantClientId
				? promotionList(params)
						.then((res) => {
							if (res?.code === 200) {
								this.activitySelect = res.data || []
							}
							this.loading = false
						})
						.catch(() => {
							this.loading = false
						})
						.finally(() => {
							this.loading = false
						})
				: ((this.activitySelect = []), (this.loading = false))
		},
		check(time) {
			const now = dayjs()
				.startOf('day')
				.valueOf()
			if (time) {
				if (
					this.queryData.showTime1 &&
					this.queryData.showTime1 < now
				) {
					this.queryData.showTime1 = ''
					return this.$message.warning(
						this.$t('operation.activity_list.time_tip')
					)
				}
				if (
					this.queryData.showTime[0] &&
					this.queryData.showTime[0] < now
				) {
					this.queryData.showTime = []
					return this.$message.warning(
						this.$t('operation.activity_list.time_tip')
					)
				}
				if (
					this.queryData.showTime[0] &&
					this.queryData.showTime[0] > this.queryData.activeTime[0] &&
					this.queryData.activeTime[0]
				) {
					this.queryData.activeTime = []
					return this.$message.warning(
						this.$t('operation.activity_list.edit_time')
					)
				}
				if (
					this.queryData.showTime[1] &&
					this.queryData.showTime[1] < this.queryData.activeTime[1] &&
					this.queryData.activeTime[1]
				) {
					this.queryData.activeTime = []
					return this.$message.warning(
						this.$t('operation.activity_list.time_tip_after')
					)
				}
				if (
					this.queryData.activeTime1 &&
					this.queryData.activeTime1 < this.queryData.showTime1 &&
					this.queryData.showTime1
				) {
					this.queryData.activeTime1 = ''
					return this.$message.warning(
						this.$t('operation.activity_list.edit_time')
					)
				}
			}
		},
		beForeEdit() {
			if (this.activeName === 'first') {
				this.firstValidate()
			} else if (this.activeName === 'second' && this.editVisible) {
				this.$nextTick(() => {
					this.validate1()
					this.secondValidate()
					this.appropriation()
				})
			} else if (this.activeName === 'third' && this.editVisible) {
				this.handleFrontVal(true)
			} else if (this.activeName === 'fourth' && this.editVisible) {
				this.$nextTick(() => {
					if (
						Object.values(this.queryData2).filter((item) => item)
							.length < this.languages.length
					) {
						this.isErr4 = true
						this.$refs[this.activeName]?.setAttribute(
							'style',
							'background:red'
						)
					} else {
						this.isErr4 = false
						this.$refs[this.activeName]?.setAttribute(
							'style',
							'background:green'
						)
					}
				})
			}
		},
		// 基础配置校验
		validate() {
			if (!this.$refs['ruleForm']) return
			this.$refs['ruleForm'].validate((valid) => {
				this.isErr1 = valid
			})
		},
		// 规则配置
		validate1() {
			if (!this.$refs['ruleForm1']) return
			this.$refs['ruleForm1'].validate((valid) => {
				this.isValidate1 = valid
				// return valid
			})
		},
		firstValidate() {
			this.$nextTick(() => {
				if (!this.editVisible) return
				this.validate()
				if (!this.isErr1 && this.activeName === 'first') {
					this.firstOk = false
					this.firstNoOk = true
					this.$refs[this.activeName]?.setAttribute(
						'style',
						'background:red'
					)
				} else if (this.isErr1 && this.activeName === 'first') {
					this.firstOk = true
					this.firstNoOk = false
					this.$nextTick(() => {
						this.$refs[this.activeName]?.setAttribute(
							'style',
							'background:green'
						)
					})
				}
			})
		},
		secondValidate(activeName) {
			if (activeName) this.activeName = activeName
			this.isErr2 = this.isValidate1 && this.isValidate5
			if (!this.isErr2 && this.activeName === 'second') {
				this.secondOk = false
				this.secondNoOk = true
				this.$nextTick(() => {
					this.$refs[this.activeName]?.setAttribute(
						'style',
						'background:red'
					)
				})
			} else if (this.isErr2 && this.activeName === 'second') {
				this.secondOk = true
				this.secondNoOk = false
				this.$nextTick(() => {
					this.$refs[this.activeName]?.setAttribute(
						'style',
						'background:green'
					)
				})
			}
		},
		appropriation() {
			this.$refs.appropriation?.$refs.tableForm?.validate((valid) => {
				this.$nextTick(() => {
					this.isValidate5 = valid
					this.secondValidate()
					this.secondValidated()
				})
				return valid
			})
		},
		handleFrontValeDid(val) {
			if (val) {
				// console.log(val, '--handleFrontVal-')
				this.$refs.FrontFiguration?.$refs.ruleForm?.validate(
					(valid) => {
						if (valid) {
							this.$nextTick(() => {
								this.$refs.third?.setAttribute(
									'style',
									'background:green'
								)
							})
						} else {
							this.$nextTick(() => {
								this.$refs.third?.setAttribute(
									'style',
									'background:red'
								)
							})
						}
						this.isErr3 = valid
						return valid
					}
				)
			}
		},
		handleFrontVal(val) {
			if (val) {
				if (this.activeName !== 'third' && this.editVisible) return
				// console.log(val, '--handleFrontVal-')
				this.$refs.FrontFiguration?.$refs.ruleForm?.validate(
					(valid) => {
						if (valid) {
							this.$nextTick(() => {
								this.$refs.third?.setAttribute(
									'style',
									'background:green'
								)
							})
						} else {
							this.$nextTick(() => {
								this.$refs.third?.setAttribute(
									'style',
									'background:red'
								)
							})
						}
						this.isErr3 = valid
						return valid
					}
				)
			}
		},
		// 前端配置 // 前端配置的圆点检测
		FrontFiguration() {
			this.$refs.FrontFiguration?.$refs.ruleForm?.validate((valid) => {
				// console.log(valid, 'valid3')
				this.isErr3 = valid
				return valid
			})
		},
		// 获得文件地址
		getFileUrl(fileUrl) {
			this.$nextTick(() => {
				this.queryData.excelList = []
				this.queryData.excelList.push(...fileUrl)
			})
		},
		closeFileUp(flag) {
			this.visibleUpload = false
		},
		// 上传弹出框
		Upload() {
			this.visibleUpload = true
		},
		// 	取消
		resetSave() {
			this.editVisible = false
			// return this.$message.warning('已取消!')
		},
		downloadExcel() {
			const loading = this.$loading({
				lock: true,
				text: '',
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			})
			const handApi =
				this.rowData.name1 == '1'
					? this.$api.firstDepositDownload
					: this.$api.displayPageDownload
			handApi()
				.then((res) => {
					const { data, status } = res
					if (res && status === 200) {
						loading.close()
						const { type } = data
						if (type.includes('application/json')) {
							const reader = new FileReader()
							reader.onload = (evt) => {
								if (evt.target.readyState === 2) {
									const {
										target: { result }
									} = evt
									const ret = JSON.parse(result)
									if (ret.code !== 200) {
										this.$message({
											type: 'error',
											message: ret.msg,
											duration: 1500
										})
									}
								}
							}
							reader.readAsText(data)
						} else {
							const result = res.data
							const disposition =
								res.headers['content-disposition']
							const fileNames =
								disposition && disposition.split("''")
							let fileName = fileNames[1]
							fileName = decodeURIComponent(fileName)
							const blob = new Blob([result], {
								type: 'application/octet-stream'
							})
							if ('download' in document.createElement('a')) {
								const downloadLink = document.createElement('a')
								downloadLink.download = fileName || ''
								downloadLink.style.display = 'none'
								downloadLink.href = URL.createObjectURL(blob)
								document.body.appendChild(downloadLink)
								downloadLink.click()
								URL.revokeObjectURL(downloadLink.href)
								document.body.removeChild(downloadLink)
							} else {
								window.navigator.msSaveBlob(blob, fileName)
							}
							this.$message({
								type: 'success',
								message: this.$t('common.download_success'),
								duration: 1500
							})
						}
					}
				})
				.catch(() => {
					this.loading = false
					this.$message({
						type: 'error',
						message: this.$t('common.download_fail'),
						duration: 1500
					})
				})
		},
		handleSave() {
			let paramsDatas = {}
			let tagName = ''

			const deviceType = []
			this.cities &&
				this.cities?.length > 1 &&
				this.cities.map((val) => {
					if (this.queryData.deviceType.includes(val.description)) {
						// return val.code
						val !== '' && deviceType.push(val.code)
					}
				})
			// console.log(deviceType, 'deviceType')
			const venue = this.queryData1.venue || []
			this.activitySelect &&
				this.activitySelect?.length > 0 &&
				// eslint-disable-next-line no-undef
				[
					{ id: '-1', name: this.$t('common.all') },
					...this.activitySelect
				].map((val) => {
					if (val.id === this.queryData.tagId) {
						tagName = val[this.activityName]
					}
				})

			const [start, end] = this.queryData.activeTime || []
			const [start1, end1] = this.queryData.showTime || []
			if (this.rowData.name1 == '1') {
				if (
					this.firstNoOk ||
					this.secondNoOk ||
					(!this.isErr3 &&
						(this.isErr3 !== 0 || this.isErr3 !== '0')) ||
					(this.isErr4 &&
						(this.isErr4 !== 0 ||
							this.isErr4 !== '0' ||
							Object.values(this.queryData2).filter(
								(item) => item
							).length < this.languages.length))
				) {
					return this.$message({
						message: this.$t('operation.activity_list.check'),
						type: 'warning'
					})
				}

				paramsDatas = {
					...this.queryData,
					...this.queryData1,
					scRuleList: this.$refs.appropriation?.$refs.tableForm?.model
						?.scRuleList,
					...this.$refs.FrontFiguration.queryData,
					...this.queryData2,
					vipId: this.queryData1.vipSerialNum,
					vipLevel:
						this.vipRiskList.find(
							(item) => item.id === this.queryData1.vipSerialNum
						) &&
						this.vipRiskList.find(
							(item) => item.id === this.queryData1.vipSerialNum
						).vipSerialNum,
					venue: venue && venue.join(','),
					deviceType:
						(deviceType?.length > 0 && deviceType.join(',')) ||
						null,
					activityStartTime:
						this.queryData.cycle === 1
							? start &&
							  dayjs(start).format('YYYY-MM-DD HH:mm:ss')
							: (this.queryData.activeTime1 &&
									dayjs(this.queryData.activeTime1).format(
										'YYYY-MM-DD HH:mm:ss'
									)) ||
							  undefined,

					showStartTime:
						this.queryData.cycle === 1
							? start1 &&
							  dayjs(start1).format('YYYY-MM-DD HH:mm:ss')
							: (this.queryData.showTime1 &&
									dayjs(this.queryData.showTime1).format(
										'YYYY-MM-DD HH:mm:ss'
									)) ||
							  undefined,
					activityEndTime:
						this.queryData.cycle === 1
							? end && dayjs(end).format('YYYY-MM-DD HH:mm:ss')
							: dayjs(new Date('2049-12-31 23:59:59')).format(
									'YYYY-MM-DD HH:mm:ss'
							  ),
					showEndTime:
						this.queryData.cycle === 1
							? end1 && dayjs(end1).format('YYYY-MM-DD HH:mm:ss')
							: dayjs(new Date('2050-01-01 00:00:00')).format(
									'YYYY-MM-DD HH:mm:ss'
							  ),
					tagName: tagName,
					title:
						Object.keys({
							cnTitle: '',
							enTitle: '',
							thTitle: '',
							vieTitle: ''
						})
							.filter((item) => this.queryData[item])
							.map((item) => this.queryData[item])[0] || '',
					merchantId: this.merchantInfoOther.id,
					merchantName: this.merchantInfoOther.merchantName,
					operator: localStorage.getItem('username') || '',
					activityType:
						(this.activityTypeStatus &&
							this.activityTypeStatus.find((val) => {
								return (
									val.code == this.rowData.name1 && val.code
								)
							}) &&
							this.activityTypeStatus.find((val) => {
								return (
									val.code == this.rowData.name1 && val.code
								)
							}).code) ||
						this.rowData.activityType
				}
			} else {
				if (
					this.firstNoOk ||
					(!this.isErr3 &&
						(this.isErr3 !== 0 || this.isErr3 !== '0')) ||
					(this.isErr4 &&
						(this.isErr4 !== 0 ||
							this.isErr4 !== '0' ||
							Object.values(this.queryData2).filter(
								(item) => item
							).length < this.languages.length))
				) {
					return this.$message({
						message: this.$t('operation.activity_list.check'),
						type: 'warning'
					})
				}
				// console.log(this.queryData, paramsDatas, '----0001')

				paramsDatas = {
					...this.queryData,
					...this.$refs.FrontFiguration.queryData,
					...this.queryData2,
					deviceType:
						(deviceType.length > 0 && deviceType.join(',')) || null,
					// activityStartTime:
					// 	dayjs(start).format('YYYY-MM-DD HH:mm:ss') || undefined,
					// activityEndTime:
					// 	dayjs(end).format('YYYY-MM-DD HH:mm:ss') || undefined,
					// showStartTime:
					// 	dayjs(start1).format('YYYY-MM-DD HH:mm:ss') || undefined,
					// showEndTime: dayjs(end1).format('YYYY-MM-DD HH:mm:ss') || undefined,
					activityStartTime:
						this.queryData.cycle === 1
							? start &&
							  dayjs(start).format('YYYY-MM-DD HH:mm:ss')
							: (this.queryData.activeTime1 &&
									dayjs(this.queryData.activeTime1).format(
										'YYYY-MM-DD HH:mm:ss'
									)) ||
							  undefined,
					// activityEndTime:
					// 	(end && dayjs(end).format('YYYY-MM-DD HH:mm:ss')) || undefined,
					showStartTime:
						this.queryData.cycle === 1
							? start1 &&
							  dayjs(start1).format('YYYY-MM-DD HH:mm:ss')
							: (this.queryData.showTime1 &&
									dayjs(this.queryData.showTime1).format(
										'YYYY-MM-DD HH:mm:ss'
									)) ||
							  undefined,
					// showEndTime:
					// 	(end1 && dayjs(end1).format('YYYY-MM-DD HH:mm:ss')) || undefined,
					activityEndTime:
						this.queryData.cycle === 1
							? end && dayjs(end).format('YYYY-MM-DD HH:mm:ss')
							: dayjs(new Date('2049-12-31 23:59:59')).format(
									'YYYY-MM-DD HH:mm:ss'
							  ),
					showEndTime:
						this.queryData.cycle === 1
							? end1 && dayjs(end1).format('YYYY-MM-DD HH:mm:ss')
							: dayjs(new Date('2050-01-01 00:00:00')).format(
									'YYYY-MM-DD HH:mm:ss'
							  ),
					tagName: tagName,
					title:
						Object.keys({
							cnTitle: '',
							enTitle: '',
							thTitle: '',
							vieTitle: ''
						})
							.filter((item) => this.queryData[item])
							.map((item) => this.queryData[item])[0] || '',
					operator: localStorage.getItem('username') || '',
					merchantId: this.merchantInfoOther.id,
					activityType:
						(this.activityTypeStatus &&
							this.activityTypeStatus.find((val) => {
								return (
									val.code == this.rowData.name1 && val.code
								)
							}) &&
							this.activityTypeStatus.find((val) => {
								return (
									val.code == this.rowData.name1 && val.code
								)
							}).code) ||
						this.rowData.activityType
				}
			}
			delete paramsDatas.activeTime
			delete paramsDatas.showTime
			delete paramsDatas.activeTime1
			delete paramsDatas.showTime1
			paramsDatas.id = this.rowData.id
			// if (this.queryData.cycle === 2) {
			// 	delete paramsDatas.activityEndTime
			// 	delete paramsDatas.showEndTime
			// }

			this.loading = true
			const handle =
				this.rowData.name1 == '1'
					? this.$api.saveFirstDepositConfig
					: this.$api.saveDisplayPageConfig

			handle(paramsDatas)
				.then((res) => {
					if (res?.code === 200) {
						this.$message.success(this.$t('common.action_success'))

						const { query } = this.$route
						if (query && Object.keys(query).length > 0) {
							this.$router.push({
								path: '/operation/activityManage/activityList'
							})
							this.$parent.$children[0]?.loadData()
						}
						// this.$router.go(-1)
						this.$parent.loadData()
						this.$emit('close', false)
					}
					this.loading = false
				})
				.catch(() => {
					this.loading = false
				})
			// this.$emit('close', false)
		},

		getEditorOne(val) {},
		handleCheckAllChange(val) {
			this.queryData.deviceType = val
				? this.cities.map((val) => val.description)
				: []
			this.isIndeterminate = false
		},
		handleCheckedCitiesChange(value) {
			const checkValue = []
			value &&
				value.map((v) => {
					return v !== undefined && checkValue.push(v)
				})
			const checkedCount = checkValue.length
			this.checkAll = checkedCount === this.cities.length
			this.isIndeterminate =
				checkedCount > 0 && checkedCount < this.cities.length
		},
		// 活动场馆
		handleCheckAllChangeCg(val) {
			this.queryData1.venue = val
				? this.citiesCg.map((item) => item.venueCode)
				: []
			this.isIndeterminateCg = false
		},
		handleCheckedCitiesChangeCg(value) {
			const checkedCount = value.length
			this.checkAllCg = checkedCount === this.citiesCg.length
			this.isIndeterminateCg =
				checkedCount > 0 && checkedCount < this.citiesCg.length
		},
		handleClick(tab, event) {
			this.activeName = tab.$options.propsData.name
		}
	}
}
</script>

<style lang="scss" scoped>
.box-container {
	.box {
		width: 8px;
		height: 8px;
		background: rgba(0, 0, 0, 0.247);
		border-radius: 50%;
		position: absolute;
		top: 15px;
	}
	.b1 {
		left: 65px;
	}
	.b2 {
		left: 165px;
	}
	.b3 {
		left: 265px;
	}
	.b4 {
		left: 365px;
	}
	.bb3 {
		left: 165px;
	}
	.bb4 {
		left: 265px;
	}
}

.btn {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	min-width: 60px;
	height: 25px;
	line-height: 25px;
	&:hover {
		background: red;
		border: none;
	}
}
.small {
	position: absolute;
	top: 1;
	left: 450px;
	top: 8px;
}
.btn-left {
	left: 410px;
	z-index: 4;
}
.dao-template {
	display: flex;
	margin-top: 10%;
	justify-content: space-around;
	.dao-left {
		display: flex;
		flex-direction: column;
		span {
			font-size: 12px;
		}
	}
}
// 下载跟导入的按钮
.dao-ru {
	display: flex;
	.down {
		cursor: pointer;
		width: 120px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		border: 1px solid rgba(0, 0, 0, 0.247);
		img {
			vertical-align: middle;
		}
	}
}
.basic-params {
	position: relative;
	.close {
		width: 45px;
		height: 45px;
		position: absolute;
		right: 15px;
		top: 0;
		font-size: 25px;
		cursor: pointer;
	}
}
// 自定义的tabs标签
.tabs-card {
	.tabs-card-tabHeader {
		height: 35px;
		line-height: 35px;
		border-bottom: 1px solid rgba(0, 0, 0, 0.247);
		.tab-item {
			width: 80px;
			height: 30px;
			display: inline-block;
			line-height: 30px;
			color: #000;
			font-weight: 500;
			font-size: 14px;
			text-align: center;
			&:hover {
				cursor: pointer;
			}
			&.active {
				background: #00a7f0;
				color: #ffff;
				// animation: tabAnimate 0.5s forwards;
			}
			// @keyframes tabAnimate {
			// 	from {
			// 		-webkit-transform: translate3d(-100%, 0, 0);
			// 		transform: translate3d(-100%, 0, 0);
			// 	}

			// 	to {
			// 		-webkit-transform: translate3d(0, 0, 0);
			// 		transform: translate3d(0, 0, 0);
			// 	}
			// }
		}
	}
}

.check-box-style {
	display: flex;
}
.basic-container {
	margin-top: 20px;
	margin-left: 15px;
}
::v-deep .el-tabs__active-bar {
	height: 4px;
}
::v-deep .el-tabs__item {
	font-size: 15px;
}
//input-number 位置
::v-deep .el-form-item__content .el-input-group {
	vertical-align: baseline;
}
//
::v-deep .el-dialog__title {
	position: absolute;
	left: 12px;
	top: 12px;
}
::v-deep .el-dialog__header {
	padding: 44px 20px 10px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.219);
}

::v-deep .dialog-footer {
	position: absolute;
	top: 15px;
	right: 12px;
}

.vi_VN,
.th_TH,
.en_US {
	.dao-ru {
		.down {
			min-width: 120px;
			width: auto;
		}
	}
}
.vi_VN {
	.box-container .b1 {
		left: 117px;
	}

	.box-container .b2 {
		left: 269px;
	}
	.box-container .b3 {
		left: 516px;
	}
	.box-container .b4 {
		left: 678px;
	}

	.box-container .bb3 {
		left: 365px;
	}

	.box-container .bb4 {
		left: 530px;
	}
}

.th_TH {
	.box-container .b1 {
		left: 133px;
	}

	.box-container .b2 {
		left: 280px;
	}
	.box-container .b3 {
		left: 450px;
	}
	.box-container .b4 {
		left: 620px;
	}

	.box-container .bb3 {
		left: 310px;
	}

	.box-container .bb4 {
		left: 478px;
	}
}
</style>
